<template>
    <Form ref="formDynamic" :model="formDynamic" :label-width=100 style="width: 500px">
        <FormItem
                v-for="(item, index) in formDynamic.items"
                v-if="item.status"
                :key="index"
                :label="'清单项'"
                :prop="'items.' + index + '.name'"
                :rules="{required: false, message: 'Item ' + item.index +' can not be empty', trigger: 'blur'}">
            <Row>
                <Col span="12">
                    <Input type="text" v-model="item.name" placeholder="输入名称"></Input>
                </Col>
				<Col span="3">
				    <Input type="text" v-model="item.unit"></Input>
				</Col>
                <Col span="2" offset="1">
                    <Button @click="handleRemove(index)">删除</Button>
                </Col>
            </Row>
        </FormItem>
        <FormItem>
            <Row>
                <Col span="8">
                    <Button type="dashed" long @click="handleAdd" icon="md-add">添加新项</Button>
                </Col>
            </Row>
        </FormItem>
        <!-- <FormItem>
            <Button type="primary" @click="handleSubmit('formDynamic')">Submit</Button>
            <Button @click="handleReset('formDynamic')" style="margin-left: 8px">Reset</Button>
        </FormItem> -->
    </Form>
</template>
<script>
    export default {
		name: 'dform',
        data () {
            return {
                index: 1,
                formDynamic: {
                    items: []
                }
            }
        },
        methods: {
            /* handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$Message.success('Success!');
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            }, */
            handleAdd () {
                this.index++;
                this.formDynamic.items.push({
                    name: '',
					unit: '1件',
                    index: this.index,
                    status: 1
                });
            },
            handleRemove (index) {
                this.formDynamic.items[index].status = 0;
            }
        }
    }
</script>
